<script lang="ts">
import {defineComponent, PropType} from 'vue'
import ImgDragWithResize from "@/components/ViewerImgs/ImgDragWithResize.vue";
import CacheImg from "@/components/CacheImg/index.vue";
import NavBar from "@/components/ViewerImgs/NavBar.vue";
export default defineComponent({
  name: "ViewerImgs",
  components: {NavBar, CacheImg, ImgDragWithResize },
  props: {
    imgsList: { // 图片的url列表
      type:Array as PropType<string[]>,
      default: ()=>[]
    },
    imgsNameList: { // 图片的名字列表
      type:Array as PropType<string[]>,
      default: ()=>[]
    },
    zIndex: {
      type: Number as PropType<number>,
      default: ()=> 9999
    },
    rootElStyle: { // 根节点样式
      type: Object as PropType<CSSStyleDeclaration>,
      default: ()=> {}
    },
    appendToEl: {
      type:[String,Object] as PropType<'body' | 'none' | HTMLElement>,
      default: ()=> 'body'
    }
  },
  data() {
    return {
      showIndex: 0, // imgsList现在显示的位置
      showRoot: false,
      imgloadAgain: true,
    }
  },
  computed: {
    rootElStyleComp() {
      return {
        ...this.rootElStyle,
        zIndex: this.zIndex
      }
    },
  },
  emits:[
    'hide', // 隐藏控件触发
    'show', // 显示控件触发
    'view', // 切换图片触发
  ],
  watch: {
    appendToEl: {
      immediate: true,
      handler() {
        this.$nextTick(()=>{
          if(this.appendToEl === 'body') {
            document.body.appendChild(this.$el)
          } else if(this.appendToEl !== 'none') {
            this.appendToEl.appendChild(this.$el)
          }
        })
      }
    },
  },
  unmounted() {
    this.$el.remove()
  },
  methods: {
    /**
     * 主动调用
     * @param index
     */
    show(index) {
      this.showRoot = true
      this.imgDivClick({},index)
    },
    imgDivClick(item,index){
      this.showIndex = index
      this.$emit('view',this.showIndex)
      this.$refs.ImgDragWithResizeRef.dbClickInit()
    },
    lastImg() {
      let index = this.showIndex-1
      if(index < 0) {
        index= this.imgsList.length - 1
      }
      this.imgDivClick({},index)
    },
    nextImg() {
      let index = this.showIndex+1
      if(index >= this.imgsList.length) {
        index= 0
      }
      this.imgDivClick({},index)
    },
    rotateFun(add) {
      this.$refs.ImgDragWithResizeRef.rotateFun(add)
    },
    updateScale(add) {
      this.$refs.ImgDragWithResizeRef.updateScale(add)
    },
    updateRotateY() {
      this.$refs.ImgDragWithResizeRef.updateRotateY()
    },
    updateRotateX() {
      this.$refs.ImgDragWithResizeRef.updateRotateX()
    },
  }
})
</script>

<template>
  <div :style="rootElStyleComp" class="ViewerImgs" v-show="showRoot" @click.stop="showRoot=false">
    <div class="title">
      <div class="word">
        {{imgsNameList[showIndex]}}
      </div>
      <div>
        <el-button
          size="large"
          icon="close"
          circle
          color="#1705054d"
          @click="showRoot=false"
        ></el-button>
      </div>
    </div>
    <div class="imgViewDiv">
      <ImgDragWithResize
        ref="ImgDragWithResizeRef"
        :image-url="imgsList[showIndex]"
      ></ImgDragWithResize>
    </div>
    <div class="btns" @click.stop>
      <el-button
        size="small"
        icon="ArrowLeft"
        circle
        color="#1705054d"
        @click="lastImg"
      ></el-button>
      <el-button
        size="small"
        icon="plus"
        circle
        color="#1705054d"
        @click="updateScale(0.1)"
      ></el-button>
      <el-button
        size="small"
        icon="minus"
        circle
        color="#1705054d"
        @click="updateScale(-0.1)"
      ></el-button>
      <el-button
        size="small"
        icon="ArrowRight"
        circle
        color="#1705054d"
        @click="nextImg"
      ></el-button>
      <el-button
        size="small"
        icon="RefreshLeft"
        circle
        color="#1705054d"
        @click="rotateFun(-90)"
      ></el-button>
      <el-button
        size="small"
        icon="RefreshRight"
        circle
        color="#1705054d"
        @click="rotateFun(90)"
      ></el-button>
      <el-button
        size="small"
        icon="DCaret"
        circle
        color="#1705054d"
        @click="updateRotateX"
      ></el-button>
      <el-button
        size="small"
        icon="DCaret"
        style="transform: rotateZ(90deg)"
        circle
        color="#1705054d"
        @click="updateRotateY"
      ></el-button>
    </div>
    <NavBar
      :imgs-list="imgsList"
      @imgDivClick="imgDivClick"
      :show-index="showIndex"
    ></NavBar>
  </div>
</template>

<style scoped lang="scss">
.ViewerImgs{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(108, 110, 114, 0.53);
  position: fixed;
  top: 0;
  left: 0;
  .imgViewDiv{
    flex: auto;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
  }
  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    .word{
      flex: auto;
      margin-left: 10px;
      margin-right: 10px;
      word-break: break-all;
    }
  }
  .btns{
    margin-top: 10px;
    text-align: center;
    margin-bottom: 10px;
  }
  .navbar{
    flex-shrink: 0;
  }
}
</style>
